<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素具备边框以外距离，四个，上下 左右 
			外边距问题1：行内元素：a、i、delete..只支持左右边距
			            布局，支持左右推动效果
						解决方案：行砖块！
		*/
		 span{
			 border: 1px solid red ;
              /*margin外边距属性：1个属性值 上下左右*/
			  margin: 300px;
			  /* margin外边距属性：2个属性值 :上下 左右*/
			  margin:100px 200px;
			 /* margin外边距属性：3个属性值 :上 右左 下*/
			 margin:100px 200px 300px;
			 /* margin外边距属性：4个属性值 :上  右  下  左 */
			 margin:100px 200px 300px 400px;
			 /* 常用属性：自适应居中 */
			 margin:auto;
			 margin-left: 800px;
		 }
		 /* 外边距问题2：外边距合并问题 
		    上下元素都存在外边距，垂直以最大外边距值为主
			外边距垂直合并：最大外边距为主，怎么解决
			推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素其中上、下外边距,重新计算
			      2.padding 代替margin*/
		 #parent{
			 width: 200px;
			 height: 200px;
			 background: #00aa7f;
			margin-top: 30px;
			/* 父元素：border: 1px solid transparent; */
			border: 1px solid transparent;
			/* 父元素：overflow：hidden；创建新块级上下文，阻止外边距合并 */
			overflow: hidden;
		 }
		 #child{
			 margin-top: 30px;
			 width: 100px;
			 height: 100px;
			 background: #ff6c9b;
		 }
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		
		<hr >
		<!-- 元素：存在与框模型=外边距+边框+内边距+内容
		 有些元素默认存在外边距，处理方案：统配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
	</body>
</html>
<!--   测元素存不存在外边距
       ul li          √
       form input     ×
	   table tr td    ×
	   p              √
	   *{margin:0}
	   -->